<template>
	<div class="regulation-detail-page">
		<!-- 导航栏 -->
		<van-nav-bar :title="title" left-text="返回" left-arrow fixed placeholder @click-left="onBack" />

		<!-- 加载状态 -->
		<div v-if="loading" class="loading-container">
			<van-loading type="spinner" color="#1989fa" vertical> 加载中... </van-loading>
		</div>

		<!-- 详情信息 -->
		<div v-else-if="regulationData.id" class="detail-content">
			<!-- 头部信息 -->
			<div class="header-info">
				<h2 class="doc-title">{{ regulationData.docName }}</h2>
				<div class="date-info">
					<van-icon name="clock-o" size="16" />
					<span>发布日期：{{ formatDate(regulationData.releaseDate) }}</span>
				</div>
				<div v-if="regulationData.remark" class="remark-info">
					<van-icon name="info-o" size="16" />
					<span>{{ regulationData.remark }}</span>
				</div>
			</div>

			<!-- 文档内容区域 -->
			<div class="document-container">
				<!-- 图片预览 -->
				<div v-if="isImageUrl(regulationData.accessUrl)" class="image-container">
					<img :key="imageKey" :src="regulationData.accessUrl" alt="法规文档" class="doc-image" @load="onImageLoad" @error="onImageError" />
				</div>

				<!-- PDF预览 -->
				<div v-else-if="isPdfUrl(regulationData.accessUrl)" class="pdf-container">
					<!-- iOS设备使用object标签或提供打开链接 -->
					<template v-if="isIOS()">
						<div class="ios-pdf-container">
							<van-empty image="document" description="iOS设备PDF预览">
								<p class="ios-tip">iOS Safari不支持PDF内嵌预览</p>
								<p class="ios-tip">请选择以下方式查看文档：</p>
								<div class="ios-actions">
									<van-button type="primary" icon="eye-o" @click="openPdfInNewTab">在新标签页打开</van-button>
									<van-button plain type="primary" icon="down" @click="downloadFile">下载PDF</van-button>
								</div>
							</van-empty>
						</div>
					</template>

					<!-- 非iOS设备使用iframe -->
					<template v-else>
						<iframe
							:src="getPdfViewUrl(regulationData.accessUrl)"
							class="pdf-iframe"
							frameborder="0"
							scrolling="yes"
							allowfullscreen
							@load="onPdfLoad"
							@error="onPdfError"
						></iframe>
						<!-- PDF加载提示 -->
						<div v-if="showPdfTip" class="pdf-tip">
							<van-icon name="info-o" size="24" color="#1989fa" />
							<p>文档加载中，请稍候...</p>
							<p class="tip-text">如果无法预览，请点击下方下载按钮</p>
						</div>
					</template>
				</div>

				<!-- 其他文件类型 -->
				<div v-else-if="regulationData.accessUrl" class="other-file-container">
					<van-empty description="此文件格式暂不支持在线预览">
						<van-button type="primary" @click="downloadFile">下载查看</van-button>
					</van-empty>
				</div>

				<!-- 无文件 -->
				<div v-else class="no-file">
					<van-icon name="photo-fail" size="48" />
					<p>暂无文档</p>
				</div>
			</div>

			<!-- 底部操作按钮 -->
			<!-- 
			<div class="footer-actions">
				<van-button type="primary" size="large" icon="down" @click="downloadFile" :disabled="!regulationData.accessUrl"> 下载文档 </van-button>
			</div>
			-->
		</div>
	</div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { showToast } from 'vant'
import { getRegulationDetail } from '@/api/regulation'

/**
 * 法律法规详情页面
 * 注意：此页面为公开访问，不需要登录/token验证，游客可直接访问
 */
export default {
	name: 'RegulationDetail',
	setup() {
		const route = useRoute()
		const router = useRouter()

		// 响应式数据
		const loading = ref(true)
		const regulationData = ref({})
		const showDownloadTip = ref(false)
		const showPdfTip = ref(false)
		const imageKey = ref(0)

		// 检测是否为iOS设备
		const isIOS = () => {
			return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream
		}

		// 页面标题
		const title = computed(() => {
			return regulationData.value.docName || '法规详情'
		})

		// 判断是否为图片URL
		const isImageUrl = (url) => {
			if (!url) return false
			const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg']
			const lowerUrl = url.toLowerCase()
			return imageExtensions.some((ext) => lowerUrl.includes(ext))
		}

		// 判断是否为PDF文件
		const isPdfUrl = (url) => {
			if (!url) return false
			const lowerUrl = url.toLowerCase()
			return lowerUrl.includes('.pdf') || lowerUrl.includes('pdf')
		}

		// 获取文件类型
		const getFileType = (url) => {
			if (!url) return 'unknown'
			if (isImageUrl(url)) return 'image'
			if (isPdfUrl(url)) return 'pdf'
			return 'other'
		}

		/**
		 * 获取PDF预览URL（隐藏工具栏并适配移动端）
		 * 在PDF URL后添加参数来隐藏浏览器默认的工具栏并优化显示
		 *
		 * 支持的参数说明：
		 * - toolbar=0: 隐藏工具栏
		 * - navpanes=0: 隐藏导航面板（侧边栏）
		 * - statusbar=0: 隐藏状态栏
		 * - scrollbar=1: 显示滚动条
		 * - view=Fit: 适应页面（完整显示）
		 * - zoom=page-fit: 缩放至适应整页（移动端友好）
		 *
		 * 移动端优化：
		 * - 使用 view=Fit 而不是 FitH（水平适应），确保整页可见
		 * - 添加 zoom=page-fit 确保PDF按比例缩放到适合屏幕
		 *
		 * 注意：不同浏览器对这些参数的支持程度不同
		 * - Chrome/Edge: 支持 #toolbar=0 等参数
		 * - Firefox: 支持 #toolbar=0 等参数
		 * - Safari/iOS: 对参数支持有限，主要依赖CSS控制
		 *
		 * @param {string} url - PDF文件URL
		 * @returns {string} - 处理后的URL
		 */
		const getPdfViewUrl = (url) => {
			if (!url) return ''

			// 移除URL中已有的锚点参数（如果有）
			const baseUrl = url.split('#')[0]

			// 添加PDF查看参数（移动端优化）
			// 使用 # 而不是 ? 因为这是PDF内部的导航参数
			// view=Fit 确保整页适应屏幕，不会只显示部分内容
			const pdfParams = 'toolbar=0&navpanes=0&statusbar=0&scrollbar=1&view=Fit&zoom=page-fit'

			return `${baseUrl}#${pdfParams}`
		}

		// 格式化日期
		const formatDate = (dateStr) => {
			if (!dateStr) return ''
			const date = new Date(dateStr)
			const year = date.getFullYear()
			const month = String(date.getMonth() + 1).padStart(2, '0')
			const day = String(date.getDate()).padStart(2, '0')
			return `${year}-${month}-${day}`
		}

		// 返回上一页
		const onBack = () => {
			router.back()
		}

		// 图片加载成功
		const onImageLoad = () => {
			loading.value = false
		}

		// 图片加载失败
		const onImageError = () => {
			loading.value = false
			showToast('图片加载失败')
			showDownloadTip.value = true
		}

		// PDF加载成功
		const onPdfLoad = () => {
			console.log('PDF加载完成')
			loading.value = false
			// 3秒后隐藏提示
			setTimeout(() => {
				showPdfTip.value = false
			}, 3000)
		}

		// PDF加载失败
		const onPdfError = () => {
			console.log('PDF加载失败')
			loading.value = false
			showPdfTip.value = true
			showToast('PDF加载失败，请尝试下载查看')
		}

		// 在新标签页打开PDF（iOS专用）
		const openPdfInNewTab = () => {
			if (!regulationData.value.accessUrl) {
				showToast('文档链接不存在')
				return
			}

			console.log('iOS设备：在新标签页打开PDF')
			// iOS Safari会在新标签页中打开PDF，提供原生预览
			window.open(regulationData.value.accessUrl, '_blank')
		}

		// 下载文件
		const downloadFile = () => {
			if (!regulationData.value.accessUrl) {
				showToast('文档链接不存在')
				return
			}

			console.log('下载文件:', regulationData.value.accessUrl)
			// 打开新窗口下载
			const link = document.createElement('a')
			link.href = regulationData.value.accessUrl
			link.download = regulationData.value.docName || '法规文档'
			link.target = '_blank'
			document.body.appendChild(link)
			link.click()
			document.body.removeChild(link)

			showToast('已开始下载')
		}

		// 加载详情数据
		const loadDetail = async () => {
			const id = route.query.id || route.params.id

			if (!id) {
				showToast('缺少法规ID')
				loading.value = false
				return
			}

			try {
				loading.value = true

				const response = await getRegulationDetail(id)

				if (response.code === '0' && response.data) {
					regulationData.value = response.data

					// 没有文件URL
					if (!response.data.accessUrl) {
						loading.value = false
						return
					}

					// 根据文件类型处理
					const fileType = getFileType(response.data.accessUrl)
					console.log('文件类型:', fileType, '文件URL:', response.data.accessUrl)

					if (fileType === 'image') {
						// 图片类型：强制刷新图片组件
						imageKey.value += 1
						// 设置超时自动停止loading（5秒后）
						setTimeout(() => {
							if (loading.value) {
								loading.value = false
							}
						}, 5000)
					} else if (fileType === 'pdf') {
						// PDF类型：显示加载提示
						showPdfTip.value = true
						// 设置超时自动停止loading（3秒后）
						setTimeout(() => {
							if (loading.value) {
								loading.value = false
							}
						}, 3000)
					} else {
						// 其他类型：直接隐藏loading
						loading.value = false
					}
				} else {
					showToast(response.msg || '获取详情失败')
					loading.value = false
				}
			} catch (error) {
				console.error('获取法规详情失败:', error)
				showToast('网络错误，请稍后重试')
				loading.value = false
			}
		}

		onMounted(() => {
			loadDetail()
		})

		return {
			loading,
			regulationData,
			showDownloadTip,
			showPdfTip,
			imageKey,
			title,
			isImageUrl,
			isPdfUrl,
			getFileType,
			getPdfViewUrl,
			formatDate,
			onBack,
			onImageLoad,
			onImageError,
			onPdfLoad,
			onPdfError,
			openPdfInNewTab,
			downloadFile,
			isIOS,
		}
	},
}
</script>

<style lang="less" scoped>
.regulation-detail-page {
	min-height: 100vh;
	background-color: #f7f8fa;
	padding-bottom: 80px; // 为底部按钮留空间
	margin: 0;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
}

.loading-container {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1000;
}

.detail-content {
	margin: 0;
	padding: 0;
	border: none;

	.header-info {
		background: #fff;
		padding: 16px;
		margin-bottom: 0;
		border: none;

		.doc-title {
			font-size: 18px;
			font-weight: 600;
			color: #323233;
			line-height: 26px;
			margin: 0 0 12px 0;
		}

		.meta-info {
			margin-bottom: 12px;

			.ml-8 {
				margin-left: 8px;
			}
		}

		.date-info,
		.remark-info {
			font-size: 13px;
			color: #646566;
			display: flex;
			align-items: center;
			gap: 6px;
			margin-bottom: 8px;

			&:last-child {
				margin-bottom: 0;
			}
		}
	}

	.image-container {
		background: #fff;
		padding: 0;
		margin: 0;
		border: none;
		overflow: hidden;
		line-height: 0; // 移除图片下方的间隙

		.doc-image {
			width: 100%;
			height: auto;
			display: block;
			border: none;
			border-radius: 0;
			max-width: 100%;
			object-fit: contain;
			margin: 0;
			padding: 0;
		}
	}

	// PDF预览容器
	.pdf-container {
		background: #525659;
		position: relative;
		min-height: calc(100vh - 250px);
		overflow: auto; // 允许滚动，以便查看完整内容
		-webkit-overflow-scrolling: touch; // iOS平滑滚动

		// iOS PDF容器
		.ios-pdf-container {
			background: #fff;
			min-height: calc(100vh - 250px);
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 40px 20px;

			.ios-tip {
				margin: 8px 0;
				font-size: 14px;
				color: #646566;
				line-height: 1.6;
			}

			.ios-actions {
				margin-top: 20px;
				display: flex;
				flex-direction: column;
				gap: 12px;
				width: 100%;
				max-width: 300px;
			}
		}

		.pdf-iframe {
			width: 100%;
			height: calc(100vh - 250px);
			min-height: 600px;
			border: none;
			outline: none;
			margin: 0;
			padding: 0;
			display: block;
			background: #525659;
			box-shadow: none;
			// 移动端优化：确保iframe内容按比例缩放
			transform-origin: 0 0;
			// 禁用默认的双击缩放
			touch-action: pan-x pan-y;
		}

		.pdf-tip {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			padding: 24px;
			background: rgba(255, 255, 255, 0.95);
			border-radius: 12px;
			box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
			z-index: 10;
			pointer-events: none;

			p {
				margin: 12px 0 0;
				color: #646566;
				font-size: 14px;
				line-height: 1.5;

				&.tip-text {
					font-size: 12px;
					color: #969799;
					margin-top: 8px;
				}
			}
		}
	}

	// 确保iframe完全无边框（兼容不同浏览器）
	iframe.pdf-iframe {
		border: 0 !important;
		outline: 0 !important;
		box-shadow: none !important;
	}

	// 确保图片完全无边框
	img.doc-image {
		border: 0 !important;
		outline: 0 !important;
		box-shadow: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	// 其他文件类型容器
	.other-file-container {
		background: #fff;
		padding: 40px 20px;
		min-height: 300px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	// 无文件提示
	.no-file {
		background: #fff;
		text-align: center;
		padding: 60px 20px;
		color: #969799;

		p {
			margin: 12px 0 0;
			font-size: 14px;
		}
	}

	.document-container {
		background: #f7f8fa;
		min-height: calc(100vh - 300px);
		margin: 0;
		padding: 0;
		border: none;
	}

	.footer-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 12px 16px;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
		z-index: 100;
	}
}

:deep(.van-nav-bar) {
	background: #fff;
}

:deep(.van-nav-bar__title) {
	font-size: 16px;
	font-weight: 500;
}

// 移动端优化
@media screen and (max-width: 768px) {
	.regulation-detail-page {
		.detail-content {
			// PDF容器在移动端的特殊处理
			.pdf-container {
				// 减小最小高度，适应移动端屏幕
				min-height: calc(100vh - 200px);

				.pdf-iframe {
					height: calc(100vh - 200px);
					min-height: 500px;
					// 移动端强制宽度为100%
					max-width: 100%;
					// 确保内容不会溢出
					overflow-x: hidden;
				}
			}

			// 底部按钮在移动端的优化
			.footer-actions {
				padding: 10px 12px;

				.van-button {
					font-size: 15px;
				}
			}
		}
	}
}

// 超小屏幕优化（< 375px）
@media screen and (max-width: 375px) {
	.regulation-detail-page {
		.detail-content {
			.pdf-container {
				.pdf-iframe {
					// 超小屏幕进一步优化
					min-height: 450px;
				}
			}
		}
	}
}
</style>
